<template>
  <div class="container_sun">
    <div class="sun1">
      <el-card>
        <div class="sun_title">选择表</div>
        <div class="card_1">
          <div
              :title="item.TABLE_COMMENT"
              :class="
                choose_table === item.TABLE_NAME
                  ? 'table_list choose_table'
                  : 'table_list not_choose_table'
              "
              v-for="item in table_list"
              :key="item.TABLE_NAME"
              @click="chooseTable(item)"
          >
            <i class="el-icon-date"></i>
            <span class="table_name">{{ item.TABLE_NAME }}</span
            ><span class="table_notes">{{ item.TABLE_COMMENT }}</span>
          </div>
        </div>
      </el-card>
    </div>
    <div class="sun2">
      <div class="sun2_1">
        <el-card>
          <div class="sun_title">基本信息配置</div>
          <div class="card_2">
            <!-- 搜索 -->
            <el-row :gutter="20">
              <el-col :span="6">
                <el-row class="search_row">
                  <el-col :span="6" class="search_title">
                    <div>表名称:</div>
                  </el-col>
                  <el-col :span="18" class="scroll_input">
                    <el-input
                        disabled
                        v-model="BaseBean.tableName"
                        placeholder="请输入内容"
                        size="mini"
                        clearable
                    >
                    </el-input>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="6">
                <el-row class="search_row">
                  <el-col :span="6" class="search_title">
                    <div>表注释:</div>
                  </el-col>
                  <el-col :span="18" class="scroll_input">
                    <el-input
                        :disabled="!choose_table"
                        v-model="BaseBean.notesTable"
                        placeholder="请输入内容"
                        size="mini"
                        clearable
                    >
                    </el-input>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="6">
                <el-row class="search_row">
                  <el-col :span="6" class="search_title">
                    <div>作者:</div>
                  </el-col>
                  <el-col :span="18" class="scroll_input">
                    <el-input
                        :disabled="!choose_table"
                        placeholder="请输入内容"
                        v-model="BaseBean.author"
                        size="mini"
                        clearable
                    >
                    </el-input>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="6">
                <el-row class="search_row">
                  <el-col :span="6" class="search_title">
                    <div>包路径:</div>
                  </el-col>
                  <el-col :span="18" class="scroll_input">
                    <el-input
                        :disabled="!choose_table"
                        placeholder="请输入内容"
                        size="mini"
                        v-model="BaseBean.packagePath"
                        clearable
                    >
                    </el-input>
                  </el-col>
                </el-row>
              </el-col>

              <el-col :span="6">
                <el-row class="search_row">
                  <el-col :span="6" class="search_title">
                    <div>service包名称:</div>
                  </el-col>
                  <el-col :span="18" class="scroll_input">
                    <el-input
                        :disabled="!choose_table"
                        placeholder="请输入内容"
                        size="mini"
                        v-model="BaseBean.servicePackageName"
                        clearable
                    >
                    </el-input>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="6">
                <el-row class="search_row">
                  <el-col :span="6" class="search_title">
                    <div>controller包名称:</div>
                  </el-col>
                  <el-col :span="18" class="scroll_input">
                    <el-input
                        :disabled="!choose_table"
                        placeholder="请输入内容"
                        v-model="BaseBean.controllerPackageName"
                        size="mini"
                        clearable
                    >
                    </el-input>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="6">
                <el-row class="search_row">
                  <el-col :span="6" class="search_title">
                    <div>Mapper包名称:</div>
                  </el-col>
                  <el-col :span="18" class="scroll_input">
                    <el-input
                        :disabled="!choose_table"
                        placeholder="请输入内容"
                        size="mini"
                        v-model="BaseBean.mapperPackageName"
                        clearable
                    >
                    </el-input>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="6">
                <el-row class="search_row">
                  <el-col :span="6" class="search_title">
                    <div>实体包名称:</div>
                  </el-col>
                  <el-col :span="18" class="scroll_input">
                    <el-input
                        :disabled="!choose_table"
                        placeholder="请输入内容"
                        size="mini"
                        v-model="BaseBean.beanPackageName"
                        clearable
                    >
                    </el-input>
                  </el-col>
                </el-row>
              </el-col>

              <!-- 开关 -->
              <el-col :span="6">
                <el-row class="search_row">
                  <el-col :span="6" class="search_title">
                    <div>lombok:</div>
                  </el-col>
                  <el-col :span="18" class="scroll_switch">
                    <el-switch
                        size="mini"
                        :disabled="!choose_table"
                        v-model="BaseBean.isLonbok"
                        active-text="开启"
                        inactive-text="关闭"
                        :active-value="1"
                        :inactive-value="0"
                    >
                    </el-switch>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="6">
                <el-row class="search_row">
                  <el-col :span="6" class="search_title">
                    <div>Swagger:</div>
                  </el-col>
                  <el-col :span="18" class="scroll_switch">
                    <el-switch
                        size="mini"
                        :disabled="!choose_table"
                        v-model="BaseBean.isSwagger"
                        active-text="开启"
                        inactive-text="关闭"
                        :active-value="1"
                        :inactive-value="0"
                    >
                    </el-switch>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </div>
      <div class="sun2_2">
        <el-card>
          <div class="sun_title">配置字段</div>
          <el-table
              :data="BaseBean.queryConditions"
              border
              height="calc(100% - 42px)"
              size="mini"
          >
            <el-table-column
                prop="fieldName"
                align="center"
                label="字段名称"
                width="180"
            >
            </el-table-column>
            <el-table-column
                prop="fieldType"
                align="center"
                label="数据类型"
                width="150"
            >
            </el-table-column>
            <el-table-column
                prop="notes"
                align="center"
                label="注释"
                width="200"
            >
              <template slot-scope="scope">
                <el-input size="mini" v-model="scope.row.notes" placeholder=""></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="isDisplay" align="center" label="是否显示">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.isDisplay" :active-value="1"
                           :inactive-value="0" size="mini"></el-switch>
              </template>
            </el-table-column>
            <el-table-column
                prop="isRequired"
                align="center"
                label="是否必填"
            >
              <template slot-scope="scope">
                <el-switch v-model="scope.row.isRequired" :active-value="1"
                           :inactive-value="0" size="mini"></el-switch>
                <!-- <el-radio :label="1"> </el-radio> -->
              </template>
            </el-table-column>
            <el-table-column prop="isNull" align="center" label="是否不为null">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.isNull" disabled :active-value="1"
                           :inactive-value="0" size="mini"></el-switch>
              </template>
            </el-table-column>
            <el-table-column
                prop="isQuery"
                align="center"
                label="是否查询条件"
            >
              <template slot-scope="scope">
                <el-switch v-model="scope.row.isQuery" :active-value="1"
                           :inactive-value="0" size="mini"></el-switch>
              </template>
            </el-table-column>
            <el-table-column
                prop="isRequired"
                align="center"
                label="查询类型"
                width="150"
            >
            </el-table-column>
          </el-table>
        </el-card>
      </div>
      <el-button @click="downloadImg">提交</el-button>
    </div>
  </div>
</template>

<script>
import {tableList, getByTableFieldList,codeGenerator} from '../../api/generatorApi'

export default {
  name: 'generator',
  data() {
    return {
      choose_table: null,
      table_list: [],
      BaseBean: {
        beanName: null,
        beanCaseName: null,
        author: null,
        tableName: null,
        packagePath: null,
        mapperPackageName: 'mapper',
        beanPackageName: 'bean',
        servicePackageName: 'service',
        controllerPackageName: 'controller',
        fieldSize: null,
        fields: null,
        queryConditions: [],
        isSwagger: 1,
        notesTable: null,
        data: null,
        isLonbok: 1,
        isQuery: 0
      },
    }
  },
  methods: {
    chooseTable(res) {
      this.choose_table = res.TABLE_NAME
    },
    tableAll() {
      tableList('backstage_admin').then((res) => {
        this.table_list = res.data.list
      })
    },
    downloadImg() {
      codeGenerator(this.BaseBean).then((res) => {

      })
    }
  },
  created() {
    this.tableAll()
  },
  watch: {
    choose_table(item1, item2) {
      getByTableFieldList(item1).then((res) => {
        this.BaseBean = res.data.info
      })
    },
  },
}
</script>

<style lang="less" scoped>
.search_row {
  padding: 10px;

  .search_title {
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    margin-bottom: 20px;
  }

  .scroll_input {
    height: 30px;
  }

  .scroll_switch {
    text-align: center;
  }
}

.container_sun {
  height: 100%;
  width: 100%;
  display: flex;

  .sun1 {
    width: 20%;
    height: 100%;
    background: red;
  }

  .sun2 {
    width: 78%;
    margin-left: 10px;

    .sun2_1 {
      height: 35%;

      &::v-deep .el_card {
        height: 100%;
        overflow: auto;
      }

      .card_2 {
        height: 100%
      }

      &::v-deep .el-card__body {
        height: calc(100% - 40px);
      }
    }

    .sun2_2 {
      margin-top: 10px;
      height: calc(65% - 10px);

      &::v-deep .el-card__body {
        height: calc(100% - 40px);
      }
    }
  }

  .sun_title {
    padding: 10px;
    border-bottom: 1px solid #eee;
  }
}

.choose_table {
  border-radius: 4px;
  border: 1px solid #ebeef5;
  background: rgb(96, 98, 102);
  color: rgb(255, 255, 255);
  transition: 0.3s;
  box-shadow: 0 2px 12px 0 rgba(233, 233, 233, 233.1);
}

.not_choose_table {
  color: rgb(96, 98, 102);
}

.table_list {
  padding: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  // border-bottom:1px solid #eee ;
  font-size: 15px;

  .table_notes {
    font-size: 10px;
    padding-left: 10px;
  }

  .table_name {
    padding-left: 3px;
  }
}

.table_list:hover {
  // //   background: rgba(26, 125, 196);
  //   background: rgb(96, 98, 102);;
  //   color: rgb(255, 255, 255);
  //   border: 1px solid #EBEEF5;
  //   transition: .3s;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  background: rgba(96, 98, 102, 0.5);
  color: rgb(255, 255, 255);
  transition: 0.3s;
  box-shadow: 0 2px 12px 0 rgba(233, 233, 233, 233.1);
}
</style>
<style lang="less">
.container_sun {
  .card_2 {
    height: 150px;
    overflow-y: auto !important;
    overflow-x: hidden;
  }

  .card_1 {
    height: 600px;
    overflow-y: auto !important;
    overflow-x: hidden;
  }

  /* 设置滚动条的样式 */

  ::-webkit-scrollbar {
    width: 12px;
  }

  /* 滚动槽 */

  ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
    border-radius: 10px;
  }

  /* 滚动条滑块 */

  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
  }

  ::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(255, 0, 0, 0.4);
  }
}
</style>>


